<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<#include "include/top.html">
	<title>登录</title>
	<style type="text/css">
		body{
			margin: 0;
			background: url(${realpath}/resources/images/findpassword.jpg) no-repeat 0px 0px;
			background-size:cover;
			-webkit-background-size:cover;
			-moz-background-size:cover;
			-o-background-size:cover;
		}
	 	#embed-captcha {
            width: 320px;
            margin: 0 auto;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        .form_legend {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #0aa284;
    border-style: none none solid;
    border-width: 0 0 1px;
    color: #333;
    display: block;
    font-size: 19.5px;
    line-height: 30px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    width: 95%;
    border-color: #16a085;
}
	</style>
		<script src="http://static.geetest.com/static/tools/gt.js"></script>
</head>
<body>	
	<#include "include/header.html">
    <div class="container-findpassword">
        <div class="findpassword">
            <div>
               <legend class="form_legend">
         		找回密码
		        </legend>
                <form id="findPassword">
                    <div class="form-group">
                        <input class="form-control" placeholder="请输入邮箱" name="email" id="email"></input>
                </div>
                <div class="form-group">
                    <div id="embed-captcha"></div>
                    <p id="wait" class="show">正在加载验证码......</p>
                    <p id="notice" class="hide">请先拖动验证码到相应位置</p>
                </div>
            </form>
            <div class="form-group">
                <button type="button" class="btn btn-info block full-width" id="findpassword">发送验证码</button>
            </div>
            <p class="foot">
                <a href="${realpath}/login">返回进行登录</a>
                |
                <a href="${realpath}/register">注册一个新账号</a>
            </p>
        </div>
    </div>
    
    <script>
    
	function checkForm(content, doc) {
		var d = dialog({
			content: content,
			align: 'right',
			quickClose: true // 点击空白处快速关闭
		});
		d.show(document.getElementById(doc));
	}
    
    var handlerEmbed = function (captchaObj) {
        $("#findpassword").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();     
            }
            else{
            	                var email = $('#email').val();
        		var emailreg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        		if (email == null || $.trim(email) == '') {
        			checkForm('邮箱不能为空', 'email');
        			$("#email").parent().addClass('has-error');
        		} else if (!emailreg.test(email)) {
        			checkForm('请输入正确的邮箱', "email");
        			$("#email").parent().addClass('has-error');
        		} else {
        			$("#email").parent().removeClass('has-error');
        			var loadingindex = layer.load(0, {
        			  shade: [0.1,'#fff'] //0.1透明度的白色背景
        			});
        			$.ajax({
        				url: fzqblog.realpath + '/sendCheckCode',
        				type: 'POST',
        				dataType: 'json',
        				data: $('#findPassword').serialize(),
        				success: function(data) {
        					layer.close(loadingindex);
        					if (data.errorMsg == null) {
        						var content = '<form id="modifyPassword"><div class="form-group"><input class="form-control" type="password" placeholder="请输入新密码" name="password" id="password"></input></div><div class="form-group"><input class="form-control" type="password" placeholder="请确认新密码" name="confirmPassword" id="confirmPassword"></input></div><div class="form-group"><input class="form-control" placeholder="验证码" name="checkcode" id="checkcode"></input></div></form>';
        						var d = dialog({
        							title: '修改密码',
        							width: 300,
        							content: content,
        							okValue: '确定',
        							ok: function() {
        								var passwordreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        								var password = $('#password').val();
        								var confirmPassword = $('#confirmPassword').val();
        								var checkcode = $("#checkcode").val();
        								if (password == null || $.trim(password) == '') {
        									checkForm('密码不能是空串', 'password');
        									$("#password").parent().addClass('has-error');
        									return false;
        								} else if (password.indexOf(" ") > -1) {
        									checkForm('密码不能含有空格', 'password');
        									$("#password").parent().addClass('has-error');
        									return false;
        								} else if (password.length < 6) {
        									checkForm('密码长度不能小于6个字符', 'password');
        									$("#password").parent().addClass('has-error');
        									return false;
        								} else if (password.length > 16) {
        									checkForm('密码长度不能大于16个字符', 'password');
        									$("#password").parent().addClass('has-error');
        									return false;
        								} else if (!passwordreg.test(password)) {
        									checkForm('密码必须含有字母和数字', 'password');
        									$("#password").parent().addClass('has-error');
        									return false;
        								} else if (confirmPassword != password) {
        									$("#password").parent().removeClass('has-error');
        									checkForm('两次输入密码必须一致', 'confirmPassword');
        									$("#confirmPassword").parent().addClass('has-error');
        									return false;
        								} else if (checkcode == null || $.trim(checkcode) == '') {
        									$("#confirmPassword").parent().removeClass('has-error');
        									checkForm("验证码不能为空串", "checkcode");
        									$("#checkcode").parent().addClass('has-error');
        									return false;
        								} else {
        									$.ajax({
        										url: fzqblog.realpath+ '/findPassword.do',
        										type: 'POST',
        										dataType: 'json',
        										data: {
        											"email": email,
        											"password": password,
        											"checkcode": checkcode
        										},
        										success: function(data) {
        											if (data.errorMsg == null) {
        												var d = dialog({
        													content: "<div><img src='" + fzqblog.realpath +"/resources/images/loading.gif' />&nbsp;&nbsp;&nbsp;修改成功,跳转中...</div>",
        												});
        												d.showModal();
        												setTimeout(function() {
        													d.close().remove();
        													document.location.href = fzqblog.realpath + "/login";
        												}, 1000);
        											} else {
        												checkForm(data.errorMsg, "checkcode");
        											}
        										}
        									});
        									return false;

        								}
        							},
        							cancelValue: '取消',
        							cancel: function() {}
        						});
        						d.show();

        					} else {
        						checkForm(data.errorMsg, "email");
        					}
        				}
        			});


        		}
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>
<br><br>
    <#include "include/footer.html">
</body>
</html>